<div [hidden]="!showCreate" class="l-wrapper">
    <button class="btn btn-black l-close" (click)="onClose(); formDir.resetForm();"><i class="fas fa-times"></i></button>
    <h1>{{title}}</h1> 
    <form [formGroup]="pinpointUserForm" #formDir="ngForm" (ngSubmit)="onCreateOrUpdate()">
        <div>
            <label for="userId">{{i18nLabel.USER_ID_LABEL}}</label>
            <input type="text" id="userId" formControlName="userId" required>
            <div *ngIf="userId.invalid && (userId.dirty || userId.touched)" class="alert">
                <div *ngIf="userId.errors.required">{{i18nGuide.USER_ID_REQUIRED}}</div>
                <div *ngIf="userId.errors.minlength">{{i18nGuide.USER_ID_MIN_LENGTH}}</div>
            </div>
        </div>
        <div>
            <label for="name">{{i18nLabel.NAME_LABEL}}</label>
            <input type="text" id="name" formControlName="name" required>
            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert">
                <div *ngIf="name.errors.required">{{i18nGuide.NAME_REQUIRED}}</div>
                <div *ngIf="name.errors.minlength">{{i18nGuide.NAME_MIN_LENGTH}}</div>
            </div>
        </div>
        <div>
            <label for="department">{{i18nLabel.DEPARTMENT_LABEL}}</label>
            <input type="text" id="department" formControlName="department">
        </div>
        <div>
            <label for="phoneNumber">{{i18nLabel.PHONE_LABEL}}</label>
            <input type="text" id="phoneNumber" formControlName="phoneNumber" required>
            <div *ngIf="phoneNumber.invalid && (phoneNumber.dirty || phoneNumber.touched)" class="alert">
                    <div *ngIf="phoneNumber.errors.required">{{i18nGuide.PHONE_REQUIRED}}</div>
            </div>
        </div>
        <div>
            <label for="email">{{i18nLabel.EMAIL_LABEL}}</label>
            <input type="text" id="email" formControlName="email" required>
            <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert">
                    <div *ngIf="email.errors.required">{{i18nGuide.EMAIL_REQUIRED}}</div>
            </div>
        </div>
        <button type="submit" class="btn btn-blue l-create" [class.btn-gray]="pinpointUserForm.invalid" [disabled]="pinpointUserForm.invalid">OK</button>
    </form>
</div>